<template>
    <view v-if="!has_result" class="bg-page min-h-screen">
        <u-tabs class="base-tabs" :list="tabList" :is-scroll="false" v-model="current" @change="handleChange"
            activeColor="var(--color-primary)" inactive-color="#606266" font-size="32">
        </u-tabs>
        <u-form :model="state.formData" ref="formRef" :rules="state.rules" borderBottom :label-width="150">
            <view class="bg-[#EDEFF3] py-[12rpx] px-[32rpx] text-[26rpx] font-bold">现有机型</view>
            <u-form-item label="选择型号" prop="spec" required>
                <input class="flex-1 h-[60rpx] text-right" placeholder="选择手机型号" type="select"
                    v-model="state.formData.spec" @click="selectSpec" />
                <template v-slot:right>
                    <u-icon name="arrow-right" color="#999"></u-icon>
                </template>
            </u-form-item>
            <u-form-item label="选择内存" prop="disk" required>
                <input class="flex-1 h-[60rpx] text-right" placeholder="选择手机内存" type="select"
                    v-model="state.formData.disk" @click="showDiskPicker = true" />
                <template v-slot:right>
                    <u-icon name="arrow-right" color="#999"></u-icon>
                </template>
            </u-form-item>
            <u-form-item label="选择屏幕" prop="screen" required>
                <view class="flex  items-end justify-end w-full">
                    <u-radio-group v-model="state.formData.screen">
                        <u-radio name="dahua" shape="square" active-color="var(--color-primary)">
                            划痕明显
                        </u-radio>
                        <u-radio name="xiaohua" shape="square" active-color="var(--color-primary)">
                            轻微划痕
                        </u-radio>
                    </u-radio-group>
                </view>
            </u-form-item>

            <view class="bg-[#EDEFF3] py-[12rpx] px-[32rpx] text-[26rpx] font-bold">目标机型</view>
            <u-form-item label="选择型号" prop="target_spec" required>
                <input class="flex-1 h-[60rpx] text-right" placeholder="选择手机型号" type="select"
                    v-model="state.formData.target_spec" @click="selectTargetSpec" />
                <template v-slot:right>
                    <u-icon name="arrow-right" color="#999"></u-icon>
                </template>
            </u-form-item>
            <u-form-item label="选择内存" prop="target_disk" required>
                <input class="flex-1 h-[60rpx] text-right" placeholder="选择手机内存" type="select"
                    v-model="state.formData.target_disk" @click="showTargetDiskPicker = true" />
                <template v-slot:right>
                    <u-icon name="arrow-right" color="#999"></u-icon>
                </template>
            </u-form-item>


        </u-form>
        <view class="mt-[80rpx] px-[48rpx]">
            <button @click="onQuery" class="bg-primary rounded-[6rpx] text-white text-lg h-[80rpx] leading-[80rpx]"
                hover-class="none" form-type="submit">
                立即查询
            </button>
        </view>

        <!-- 型号 -->
        <u-picker mode="selector" v-model="showModelPicker" confirm-color="var(--color-primary)" :default-selector="[0]"
            range-key="spec" :range="modelList" @confirm="onModelConfirm" />
        <!-- 目标型号 -->
        <u-picker mode="selector" v-model="showTargetModelPicker" confirm-color="var(--color-primary)"
            :default-selector="[0]" range-key="target_spec" :range="targetModelList" @confirm="onTargetModelConfirm" />


        <u-picker mode="selector" v-model="showDiskPicker" confirm-color="var(--color-primary)" :default-selector="[0]"
            range-key="disk" :range="diskList" @confirm="onDiskConfirm" />

        <u-picker mode="selector" v-model="showTargetDiskPicker" confirm-color="var(--color-primary)"
            :default-selector="[0]" range-key="target_disk" :range="targetDiskList" @confirm="onTargetDiskConfirm" />

    </view>
    <view v-else class="bg-white min-h-screen">
        <image class="w-full h-full" mode="widthFix" src="/static/images/icon/querybanner.png" />
        <view class="py-[60rpx] px-[32rpx]">
            <view class="">
                <view class="text-[#555] text-base leading-[48rpx]">
                    根据您提交的手机型号经专业设备评估系统检测
                </view>
                <view class="text-[#555] text-base leading-[48rpx]">
                    <text>旧机</text>
                    <text class="font-bold">【{{ state.formData.spec }}】</text>
                    <text>综合估值：</text>
                    <text class="font-bold text-[#ED722F]">￥{{ state.old_price }}元</text>
                </view>
                <view class="text-[#555] text-[28rpx] leading-[48rpx]">
                    <text>新机</text>
                    <text class="font-bold">【 {{ state.formData.target_spec }}】</text>
                    <text>标准售价：</text>
                    <text class="font-bold text-[#ED722F]">￥{{ state.renew_price }}元</text>
                </view>
            </view>
        </view>

        <view class=" px-[48rpx]">
            <button class="bg-primary rounded-[6rpx] text-white text-lg h-[80rpx] leading-[80rpx]" hover-class="none"
                form-type="submit">
                换新仅需{{ state.diff_price }}元
            </button>
        </view>



    </view>
</template>

<script setup lang="ts">
import { apiRenewQuerySpec, apiRenewQuerydisk, apiRenewQueryRenew } from '@/api/renew'

import { onLoad, onShow, onPageScroll, onReady } from '@dcloudio/uni-app'
import { computed, nextTick, reactive, ref, shallowRef } from 'vue'
const tabList = [
    { name: '基础版本', value: 'jichu' },
    { name: '高级版本', value: 'gaoji' },
]
const current = ref<number>(0)
const formRef = shallowRef()

const has_result = ref(false)

const state = reactive({
    formData: {
        spec: '',
        disk: '',
        target_spec: '',
        target_disk: '',
        screen: '',
    },
    rules: {
        spec: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
        disk: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
        screen: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
        target_spec: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }],
        target_disk: [{ required: true, message: '请选择', trigger: ['change', 'blur'] }]
    },
    specArr: [],
    target_specArr: [],
    diff_price: 0,
    old_price: 0,
    renew_price: 0
})



//显示型号列表
const modelList = ref<Array<any>>([])
const targetModelList = ref<Array<any>>([])


//显示内存列表
const diskList = ref<Array<any>>([])
const targetDiskList = ref<Array<any>>([])
//显示内存选择弹窗
const showDiskPicker = ref<boolean | null>(false)
const showTargetDiskPicker = ref<boolean | null>(false)
const onDiskConfirm = (value: any) => {
    state.formData.disk = diskList.value[value].disk
    showDiskPicker.value = false
}
const onTargetDiskConfirm = (value: any) => {
    state.formData.target_disk = targetDiskList.value[value].target_disk
    showTargetDiskPicker.value = false
}







//显示型号选择弹窗
const showModelPicker = ref<boolean | null>(false)
const showTargetModelPicker = ref<boolean | null>(false)


const onQuery = async () => {

    const validateRes = await formRef.value.validate()
    if (!validateRes) {
        return
    }
    const res = await apiRenewQueryRenew({
        spec: state.formData.spec,
        disk: state.formData.disk,
        screen: state.formData.screen,
        target_spec: state.formData.target_spec,
        target_disk: state.formData.target_disk,
        type: tabList[current.value].value
    })

    state.diff_price = res.diff_price
    state.old_price = res.old_price
    state.renew_price = res.renew_price
    has_result.value = true
}
const handleChange = (index: number) => {
    current.value = Number(index)
    querySpec()
}

const onModelConfirm = (value: any) => {
    state.formData.spec = modelList.value[value].spec
    showModelPicker.value = false
    apiRenewQuerydisk({
        type: tabList[current.value].value,
        spec: state.formData.spec
    }).then((res: any) => {
        diskList.value = res.disk
    })
}

const onTargetModelConfirm = (value: any) => {
    state.formData.target_spec = targetModelList.value[value].target_spec
    showModelPicker.value = false
    apiRenewQuerydisk({
        type: tabList[current.value].value,
        spec: state.formData.target_spec
    }).then((res: any) => {
        targetDiskList.value = res.target_disk
    })

}


const querySpec = () => {
    apiRenewQuerySpec({
        type: tabList[current.value].value
    }).then((res: any) => {
        state.specArr = res.spec
        state.target_specArr = res.target_spec
    })
}

const selectSpec = () => {
    showModelPicker.value = true
    modelList.value = state.specArr
}

const selectTargetSpec = () => {
    showTargetModelPicker.value = true
    targetModelList.value = state.target_specArr
}

onReady(() => {
    formRef.value.setRules(state.rules)
})



onLoad(() => {
    querySpec()
})

</script>

<style lang="scss" scoped>
:deep(.u-form-item) {
    background: white;
    padding: 16rpx 32rpx !important;

    .u-form-item--left__content__label {
        font-size: 34rpx;
    }
}
</style>
